<!-- 忽略 -->
<template>
	<view class="container">
		<view class="question">
			<u-card :title="question.questionTitle" :sub-title="question.date" margin="20rpx 0rpx"
				box-shadow="2px 2px 2px #888888" border-radius="0" :body-style="cardstyle" :head-style="cardstyle"
				:foot-style="cardstyle">
				<view class="card-head" slot="head">
					<view class="card-head-item " @click="OtherUserDetails(question.questionUserInfo.userid)">
						<div v-if="question.questionUserInfo.sex == 0">
							<u-avatar :src="question.questionUserInfo.imagepath" mode="circle" :show-sex="true"
								sex-icon="woman"></u-avatar>
						</div>
						<div v-else>
							<u-avatar :src="question.questionUserInfo.imagepath" mode="circle" :show-sex="true"
								sex-icon="man"></u-avatar>
						</div>
					</view>
					<div style="float: left;height: 90%;">
						<view class="card-head-item " style="width: 20%">
							<p style="float: left;font-weight: 500;">{{question.questionUserInfo.username}}</p>
						</view>
						<view class="card-head-item">
							<p style="float: left;color: #C0C4CC;">{{question.date}}发布</p>
						</view>
					</div>
					<div style="float:right">
						<u-button size="mini" @click="collect()">{{co}}</u-button>
					</div>
				</view>
				<view class="card-body" slot="body">
					<!-- 消息提示 -->
					<u-toast ref="uToast" />
					<div class="questionTitle" style="font-weight: 600;color: #303133;text-align: left;">
						{{question.questiontitle}}
					</div>
					<view class="card-body-item">
						<p class="">{{question.describe}}</p>
						<div v-for="(value,key,index) in JSON.parse(question.imagePath)" style="display: flex;justify-content: center;align-items: center;">
							<image 
								@tap="previewImage(index)"
								:src="value" 
								mode="aspectFill"
							/>
						</div>
					</view>
				</view>
				<view class="" slot="foot">
					<u-icon name="chat-fill" :size="30" :label="commentListSize"></u-icon>
					<view class="like" :class="{ highlight: question.islike }" style="float: left;margin-right: 15rpx;">
						<u-icon v-if="!question.islike" name="thumb-up" :size="30" color="#9a9a9a" @click="getLike()"
							:label="question.likenum">
						</u-icon>
						<u-icon v-if="question.islike" name="thumb-up-fill" :size="30" @click="getLike()"
							:label="question.likenum"></u-icon>
					</view>
				</view>
			</u-card>
		</view>
		<view class="comment" v-for="(res, index) in commentList" :key="res.id">
			<view class="left">
				<image :src="res.userinfoEntity.imagepath" mode="aspectFill"></image>
			</view>
			<view class="right">
				<view class="top">
					<view class="name">{{ res.userinfoEntity.username }}</view>
				</view>
				<view class="content">{{ res.content }}</view>
				<view class="reply-box">
					<view class="item" v-for="(item, index) in res.replyList" :key="item.index">
						<view class="left" style="display: flex;justify-content: flex-start;align-items: center;">
							<image 
								:src="item.userinfoEntity.imagepath"  
								mode="aspectFill">
							</image>
							<view class="username">{{ item.userinfoEntity.username }}</view>
						</view>						
						<view class="text">{{ item.content }}</view>
					</view>
				</view>
				<view class="bottom">
					{{ res.date }}
					<view class="reply" @click="focusInput(res.userinfoEntity.username)">回复</view>
				</view>
			</view>
		</view>
		<div style="height: 150rpx;"></div>
		<view class="">
				<u-field
					ref="commentInput"
					v-model="comment"
					icon="chat"
					label-width="0"
					placeholder="同学,留下你的足迹吧!"
					:field-style="{'width':'500rpx','font-size':'30rpx'}"
				>
					<u-button size="mini" slot="right" type="success" @click="commitComment">发布</u-button>
				</u-field>
		</view>
		<u-modal v-model="show" width="60%" title="评论成功" :content="tips"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//当前用户信息
				userInfo: this.$store.state.user.userInfo,
				show:false,
				tips:"",
				co: "",
				//题目信息
				question: "",
				comment: "",
				commentList: [],
				commentListSize: 0,
				questionIndex: "",
				//card内部head、body样式
				cardstyle: {
					"padding-top": "0rpx",
					"padding-bottom": "10rpx"
				},
				//评论框样式
				inputStyle: {
					"width": "80%",
					"height": "50rpx",
					"font-size":"10px"					
				}
			};
		},

		onLoad(params) {
			this.questionIndex = params.questionIndex;
			this.question = this.$store.state.questionList.questionList[params.questionIndex];
			//后台接口通过问题id查询评论
			this.getComment();
			//根据questionId和collectionId(userId)查看该问题是否被收藏
			uni.request({
			    url: this.$url + 'collection/isCollect', 
			    data: {
					questionId:this.$data.question.id,
			        collectionId:this.$data.userInfo.userid
			    },
			    success: (res) => {
			        if(res.data.data == 1){
						this.$data.co = "取消收藏";
					}else{
						this.$data.co = "收藏"
					}
			    },
			});
		},
		methods: {
			//图片预览
			previewImage(current) {
				console.log(current);
				var imgArr = [];
				for(let path in JSON.parse(this.question.imagePath)){
					imgArr.push(JSON.parse(this.question.imagePath)[path]);
				}
							//预览图片
							uni.previewImage({
								urls: imgArr,
								current: current
							});
						},
			//回复
			
			focusInput:(userName)=>{
				console.log("回复")		
				this.$refs.commentInput.placeholder = '回复';
			},
			open(tips){
				this.show = true;
				this.tips = tips;
			},
			//提交评论 
			commitComment(){
				if(this.comment ==""){
					this.open("评论内容不能为空！");
					return;
				}
				uni.request({
					url:this.$url+"comments/commitComment",
					data: {
						//评论信息
						comment: this.comment,
						//被评论题目id
						questionId: this.question.id,
						//当前用户id
						userId: this.$store.getters.user.userid
					},
					success:(res)=>{
						console.log("评论成功");
						//打开提示
						this.open("同学,有了你的解答,世界变得更加美好!");
						this.getComment();
						this.comment = "";
					},
					fail:()=>{
						console.log("评论失败");
					}
				})
				
			},
			// 跳转到全部回复
			toAllReply() {
				uni.navigateTo({
					url: '/pages/template/comment/reply'
				});
			},
			//对题目点赞
			getLike() {
				//修改点赞状态
				this.$store.commit("changeIsLike", this.questionIndex);
				//修改点赞数
				if (this.question.islike == true) {
					this.$store.commit("changeLikeNum", this.question.likenum++, this.questionIndex);
					uni.request({
						url: this.$url + 'questioninfo/changeLikeNum',
						data: {
							questionId: this.question.id,
							num: this.question.likenum
						},
						success: (res) => {
							console.log("点赞成功");
						},
						fail: () => {
							console.log("点赞失败");
						}
					});
				} else {
					this.$store.commit("changeLikeNum", this.question.likenum--, this.questionIndex);
					uni.request({
						url: this.$url + 'questioninfo/changeLikeNum',
						data: {
							questionId: this.question.id,
							num: this.question.likenum
						},
						success: (res) => {
							console.log("撤销点赞成功");
						},
						fail: () => {
							console.log("撤销点赞失败");
						}
					});
				}
			},
			// 对评论点赞
			getLikeforComment(index) {
				this.commentList[index].isLike = !this.commentList[index].isLike;
				if (this.commentList[index].isLike == true) {
					this.commentList[index].likeNum++;
				} else {
					this.commentList[index].likeNum--;
				}
			},
			// 获取评论列表
		    getComment() {
				uni.request({
					url:this.$url+"comments/getComment",
					data:{
						questionId: this.question.id
					},
					success: (res) => {
						//console.log("评论"+JSON.stringify(res.data.data));
						this.commentList = res.data.data;
						this.commentListSize = this.commentList.length;
					},
					fail: () => {
						console.log("获取评论失败");
					}
				})
			},
			//点击收藏按钮
			collect(res) {
				if (this.co == '取消收藏') {
					//取消收藏
					uni.request({
					    url: this.$url + 'collection/delete', 
					    data: {
							questionId:this.$data.question.id,
					        collectionId:this.$data.userInfo.userid
					    },
					    success: (res) => {
							if(res.data.data == 1){
								//按钮变成收藏按钮
								this.co = '收藏';
								//消息提示
								this.$refs.uToast.show({
									title: '取消收藏成功！',
									type: 'success',	
								});
							}
					    },
					});
				} else {
					//收藏
					uni.request({
					    url: this.$url + 'collection/insert', 
					    data: {
							questionId:this.$data.question.id,
					        collectionId:this.$data.userInfo.userid
					    },
					    success: (res) => {
							if(res.data.data == 1){
								//按钮变成收藏按钮
								this.co = '取消收藏';
								this.$refs.uToast.show({
									title: '收藏成功！',
									type: 'success',	
								});
							}
					    },
					});
				}
			},
			//查看用户详情
			OtherUserDetails(e){
				this.$u.route({
					url: "pages/otherUserDetails/otherUserDetails",
					params:{
						userId:e
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.comment {
		display: flex;
		padding: 30rpx;

		.left {
			image {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				background-color: #f2f2f2;
			}
		}

		.right {
			flex: 1;
			padding-left: 20rpx;
			font-size: 30rpx;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;

				.name {
					color: #5677fc;
				}

				.like {
					display: flex;
					align-items: center;
					color: #9a9a9a;
					font-size: 26rpx;

					.num {
						margin-right: 4rpx;
						color: #9a9a9a;
					}
				}

				.highlight {
					color: #5677fc;

					.num {
						color: #5677fc;
					}
				}
			}

			.content {
				margin-bottom: 10rpx;
			}

			.reply-box {
				background-color: rgb(242, 242, 242);
				border-radius: 12rpx;

				.item {
					padding: 20rpx;
					border-bottom: solid 2rpx $u-border-color;

					.username {
						font-size: 24rpx;
						color: #999999;
					}
				}

				.all-reply {
					padding: 20rpx;
					display: flex;
					color: #5677fc;
					align-items: center;

					.more {
						margin-left: 6rpx;
					}
				}
			}

			.bottom {
				margin-top: 20rpx;
				display: flex;
				font-size: 24rpx;
				color: #9a9a9a;

				.reply {
					color: #5677fc;
					margin-left: 10rpx;
				}
			}
		}
	}

	.card-head-item {
		float: left;
		margin-right: 15rpx;
	}

	.card-head u-avatar {
		border-radius: 50%;
		width: 80rpx;
		height: 80rpx;
	}

	.card-head image {
		border-radius: 50%;
		width: 80rpx;
		height: 80rpx;
	}

	.card-head {
		height: 100rpx;
		margin-top: 20rpx;
	}

	image {
		width: 320rpx;
		height: 320rpx;
		margin: 8rpx;
	}

	.highlight {
		color: #5677fc;

		.num {
			color: #5677fc;
		}
	}

	u-field {
		  font-size: 39rpx;
		  position: fixed;
		  bottom: 0;
		  display: flex;
		  width: 100%;
		  background-color: #fff;
		height: 100rpx;
		
		//border-top: 1rpx solid #C0C0C0;

	}
</style>
